<template>
  <div class="recharge">
    <el-radio-group class="mb15" v-model="isCollapse" @change="changeData(isCollapse)">
      <el-radio-button :label="false">今日金币流水统计</el-radio-button>
      <el-radio-button :label="true">总金币流水统计</el-radio-button>
    </el-radio-group>
    <el-row class="mb30" v-if="coinData">
      <el-col :span="4">
        <div class="txt-center fs36 fwb">{{coinData.payment}}</div>
        <div class="txt-center fs16 mt5">充值量</div>
      </el-col>
      <el-col :span="4">
        <div class="txt-center fs36 fwb" v-if="coinData.consume >= 0">{{coinData.consume}}</div>
        <div v-if="coinData.consume<0" class="txt-center fs36 fwb">{{-coinData.consume}}</div>
        <div class="txt-center fs16 mt5">消费量</div>
      </el-col>
      <el-col :span="4">
        <div class="txt-center fs36 fwb">{{coinData.present}}</div>
        <div class="txt-center fs16 mt5">赠送量</div>
      </el-col>
    </el-row>
    <div class="mb30">
      <el-row>
        <el-col :span="8">
          <el-input
            v-model="entryTxt"
            placeholder="请输入用户ID查询"
            :change="txtnull()">
          </el-input>
        </el-col>
        <el-col :span="2">
          <div class="pl15">
            <el-button
              @click="searchList()"
              type="info">
              查询
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="用户ID">
          <template scope="props">
          <span>
            {{props.row.user.id}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户昵称">
          <template scope="props">
          <span>
            {{props.row.user.nickname}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作类型">
          <template scope="props">
            <span v-if="props.row.recordable_type=='game_record'">游戏消费</span>
            <span v-if="props.row.recordable_type=='payment'">充值</span>
            <span v-if="props.row.recordable_type=='register'">注册赠送</span>
            <span v-if="props.row.recordable_type=='payment_award'">充值赠送</span>
            <span v-if="props.row.recordable_type=='system'">系统赠送</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作金币">
          <template scope="props">
            <span v-if="props.row.coin<0">{{-props.row.coin}}</span>
            <span v-else>{{props.row.coin}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作时间">
        </el-table-column>
      </el-table>
      <page-ctrl
        v-if="pageData"
        :page_data="pageData"
        v-on:sentLengthfn="sentLengthfn"
        v-on:firstfn="firstData"
        v-on:nextfn="nextData"
        v-on:prefn="preData"
        v-on:lastfn="lastData">
      </page-ctrl>
    </div>
    <div v-if="loading" class="loadingbox"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api'
  import pageCtrl from '../common/pageCtrl'

  export default {
    name: "recharge",
    data() {
      return {
        isCollapse: false,
        pageData: null,
        searchTxt: '',
        entryTxt: '',
        page: 1,
        per_page: 5,
        loading: false,
        tableData: null,
        is_moreData: false, //是否有更多
        is_preData: false,//是否有上一页
        tableDataLength: null, //总长度
        pages: null, //总页数
        is_change: false,
        is_today:1, //是否今天
        coinData:null,
      }
    },
    mounted: function () {
      this.getCoinData(); //游戏币统计；
      if(this.$route.query.id){
        this.is_change = true
        this.searchTxt=this.$route.query.id;
        this.entryTxt=this.$route.query.id;
      }

      this.getlist(); //充值列表；
    },
    components: {
      pageCtrl
    },
    methods: {
      getCoinData:function(){
        api.fetch("/api/admin/coin-records/statistics?today="+this.is_today)
          .then(res => {
             this.coinData= res.data
          }).catch();
      },
      getlist: function () {
        this.loading = true;
        api.fetch("/api/admin/coin-records?page="
          + this.page
          + '&per_page='
          + this.per_page
          + "&user_id="
          + this.searchTxt)
          .then(res => {
            this.pageData =  res.meta;
            this.pageData.page = this.page;
            this.tableData = res.data;
            this.pageData.tableDataLength = this.pageData.pagination.total; //总长度
            this.pageData.pages = Math.ceil(this.pageData.tableDataLength / this.per_page); //总页数
            let getLengthData = this.pageData.pagination.count;
            if (this.page <= 1) {
              this.pageData.is_preData = false;
            } else {
              this.pageData.is_preData = true;
            }
            if (getLengthData < this.per_page) {
              this.pageData.is_moreData = false;
            } else {
              this.pageData.is_moreData = true;
            }
            if (this.pages == this.page) {
              this.pageData.is_moreData = false;
              this.loading = false;
            }
            this.loading = false;
          }).catch();
      },
      firstData: function () {
        this.page = 1;
        this.getlist();
      },//首页
      nextData: function () {
        this.page++;
        this.getlist();
      },//下一页
      preData: function () {
        this.page--;
        this.getlist();
      },//上一页
      lastData: function () {
        let pagelength = this.pageData.pages;
        this.page = pagelength;
        this.getlist();
      },//尾页
      sentLengthfn: function (lengthData) {
        this.page = 1;
        this.per_page = lengthData;
        this.getlist();
      },
      searchList: function () {
        if (this.entryTxt == '') {
          return
        } else {
          this.page = 1;
          if(this.entryTxt){
            this.searchTxt = this.entryTxt;
          }
          this.getlist();
          this.is_change = true;
        }
      }, //搜索
      txtnull: function () {
        if (this.is_change == true) {
          if (this.entryTxt == '') {
            this.searchTxt = '';
            this.page = 1;
            this.getlist();
            this.is_change = false;
          }
        }
      }, //输入框空
      changeData: function (dataType) {
        if(dataType){
          this.is_today=0;
          this.getCoinData();
        }else{
          this.is_today=1;
          this.getCoinData();
        }
      }
    }
  }
</script>

<style scoped>
  .user {
    height: 100%;
    min-width: 1200px;
  }
</style>

